<template>
  <div class="loading-container" v-if="visible">
    <div class="loading animated fadeIn">
      <div v-if="loading" class="spinner spinner-ios">
        <svg viewBox="0 0 64 64">
          <g stroke-width="4" stroke-linecap="round">
            <line y1="17" y2="29" transform="translate(32,32) rotate(180)">
              <animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(210)">
              <animate attributeName="stroke-opacity" dur="750ms" values="0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(240)">
              <animate attributeName="stroke-opacity" dur="750ms" values=".1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(270)">
              <animate attributeName="stroke-opacity" dur="750ms" values=".15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(300)">
              <animate attributeName="stroke-opacity" dur="750ms" values=".25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(330)">
              <animate attributeName="stroke-opacity" dur="750ms" values=".35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(0)">
              <animate attributeName="stroke-opacity" dur="750ms" values=".45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(30)">
              <animate attributeName="stroke-opacity" dur="750ms" values=".55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(60)">
              <animate attributeName="stroke-opacity" dur="750ms" values=".65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(90)">
              <animate attributeName="stroke-opacity" dur="750ms" values=".7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(120)">
              <animate attributeName="stroke-opacity" dur="750ms" values=".85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85" repeatCount="indefinite"></animate>
            </line>
            <line y1="17" y2="29" transform="translate(32,32) rotate(150)">
              <animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1" repeatCount="indefinite"></animate>
            </line>
          </g>
        </svg>
      </div>

      <span v-if="tips" class="tips" v-html="tips"></span>
    </div>
  </div>
</template>
<script>
function preventDefault(e) {
  e.preventDefault()
}

export default {
  props: {
    tips: {
      type: String,
    },
    loading: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.visible = true
      document.body.addEventListener('touchmove', preventDefault)
    },
    hide() {
      this.visible = false
      document.body.removeEventListener('touchmove', preventDefault)
    }
  }
}
</script>

<style lang="scss" scoped>
.loading-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  .loading {
    padding: 15px 25px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
  }

  .spinner {
    display: flex;
    justify-content: center;
    padding-bottom: 3px;
  }
  .spinner svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
    fill: #fff;
  }

  .tips {
    font-size: 12px;
    color: white;
    text-align: center;
    word-break: break-all;
  }
}
.animated {
  animation-duration: 0.3s;
}
.animated.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>

